<template>
    <div class="forget">
        <div class="header">
            <div @click="$router.go(-1)"><img src="../../assets/image/assets-center/left-arrow.png" alt=""
                    class="w-14 h-27" /></div>
        </div>
        <div class="title textColor">{{ $t('重置登录密码') }}</div>
        <div class="flex re-tab text-grey">
            <div :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('邮箱') }}</div>
            <div :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('手机号') }}</div>
            <div :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('谷歌验证') }}</div>
        </div>

        <ExInput :label="$t('账号')" :placeholderText="$t('请输入账号')" v-model="account" :dialCode="dialCode"
            @selectArea="onSelectArea" :area="isArea" :icon="icon" />
        <div class="btn" @click="next">{{ $t('下一步')}}</div>
        <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)">
        </nationality-list>
    </div>
</template>

<script>
import ExInput from "@/components/ex-input";
import Axios from "@/API/userCenter.js";
import nationalityList from '../authentication/components/nationalityList.vue'
    export default {
        props: {

        },
        components: {
            ExInput,
            nationalityList
        },
        data(){
            return {
                account:'',
                activeIndex: 0,
                isArea: false,
                dialCode: 0, //电话号前缀
                icon:''
            }
        },
        mounted(){
           
        },
        methods: {
            changeIndex(index){
                this.activeIndex = index;
                if(index ==1){
                    this.isArea = true
                }else{
                    this.isArea = false
                }
            },
            next(){
                if (this.account==""){
                    this.$toast(this.$t("请输入账号"))
                    return;
                }
                this.getUserNameVerifTarget()
               
            },
            getUserNameVerifTarget() {

                let type;
                if (this.activeIndex ==0){
                    type = 2
                } else if (this.activeIndex == 1){
                    type = 1
                } else  if(this.activeIndex == 2){
                    type = 3
                }
                Axios.getUserNameVerifTarget({
                    username: type == 1 ?`${this.dialCode}${this.account}`:this.account,
                    verifcode_type:type  //验证类型 1手机 2 邮箱 3谷歌验证器
                }).then((res) => {
                    if (type == 1 && !res.data.phone_authority){
                        this.$toast(this.$t('未绑定手机号'));
                        return false
                    } else if (type == 2 && !res.data.email_authority){
                        this.$toast(this.$t('未绑定邮箱'));
                        return false
                    } else if (type == 3 && !res.data.google_auth_bind){
                        this.$toast(this.$t('未绑定谷歌验证器'));
                        return false
                    }
                    let account ;
                    if (type == 1){
                        account = res.data.phone
                    }else if( type == 2){
                        account = res.data.email
                    }
                    this.$router.push({ name: 'safeVerify', query: { type: type, account: account, username: this.account } })
                }).catch((error) => {
                    if(error.code === 'ECONNABORTED'){this.$toast(this.$t('网络超时！'));}
                    else if(error.msg !== undefined){this.$toast(this.$t(error.msg));}     
                });
            },
            onSelectArea() {
                this.openBtn();
            },
            //打开国家列表底部弹窗
            openBtn() {
                this.$refs.controlChild.open();
            },
            getName(params) {
                this.icon = params[1];
                this.dialCode = params[2];
            }, 
        }
    }
</script>

<style lang="scss" scoped>
.forget{
    width: 100%;
    box-sizing: border-box;
    padding: 30px;
    font-size: 26px;
}
.header {
    display: flex;
    justify-content: space-between;
    padding: 0 26px;
    font-size: 28px;
    height: 100px;
    line-height: 100px;
}
.title {
    font-weight: 700;
    font-size: 52px;
    margin-top: 54px;
    margin-bottom: 66px;
}
.re-tab {
    margin-bottom: 44px;

    div {
        padding: 0 36px;
        height: 68px;
        line-height: 68px;
        text-align: center;
        border-radius: 8px;
        margin-right: 20px;
    }

    .active {
        background: $cont_background;
    }
}
.btn {
    background: $btn_main;
    color: #000;
    height: 88px;
    line-height: 88px;
    text-align: center;
    font-size: 35px;
    margin-top: 36px;
    border-radius: 10px;
}
</style>